<template>
  <div class="workbench">
    <div class="text-center text-[#212429] text-[28px] font-[600] mb-[10px]">
      船管看板<span class="float-right text-[#212429] font-[400] text-[14px]">{{
        timeFormat(0, 'yyyy-mm-dd')
      }}</span>
    </div>
    <div class="flex cursor-pointer" @click="handleClick">
      <div class="flex-1 ml-4 m-card" v-for="item in list.cardList" :key="item.name">
        <mCard :item="item"></mCard>
      </div>
      <div class="flex-2 ml-4">
        <mInfo></mInfo>
      </div>
    </div>
    <div class="every-day">
      <div class="title">每日情况总结</div>
      <div class="content" v-for="item in list.day" :key="item.value">
        <mList :item="item"></mList>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup name="workbench">
import mCard from './components/card.vue'
import mInfo from './components/info.vue'
import mList from './components/list.vue'
import shoudao from '@/assets/images/shoudao.png'
import huifu from '@/assets/images/huifu.png'
import daihuifu from '@/assets/images/daihuifu.png'
import weihuifu from '@/assets/images/weihuifu.png'
import jinji from '@/assets/images/jinji.png'
import { timeFormat } from '@/utils/util'
const router = useRouter()
const handleClick = () => {
  router.push({
    path: '/wordOrder/handler'
  })
}
const list = reactive({
  cardList: [
    {
      name: '今日收到',
      value: 108,
      icon: shoudao
    },
    {
      name: '今日回复',
      value: 82,
      icon: huifu
    },
    {
      name: '今日待回复',
      value: 26,
      icon: daihuifu
    },
    {
      name: '历史未回复',
      value: 37,
      icon: weihuifu
    },
    {
      name: '紧急待回复',
      value: 3,
      icon: jinji
    }
  ],
  day: [
    {
      level: 1,
      value:
        '今日共接收邮件108封，较昨日增加 / 减少30封，增幅 / 降幅为10%。其中，重要邮件（根据预设标准判断，如来自上级领导、核心业务部门等）20封，占比 9%；普通邮件 80封，占比 70%；垃圾邮件 / 广告邮件1封，占比 0%'
    },
    {
      level: 2,
      value:
        '上级领导：10封，主要涉及 [项目名称或工作事项] 的指示与反馈，如对 [具体报告或方案] 提出修改意见，要求补充 [相关数据或资料] 等。'
    },
    {
      level: 2,
      value:
        '核心业务部门 A：5封，围绕 [业务流程或合作项目] 展开，沟通了 [具体业务细节或问题]，如 [列举关键业务点]，并请求协助处理 [相关任务或提供支持]。'
    },
    {
      level: 2,
      value:
        '核心业务部门 B：5封，重点讨论了 [产品或服务相关话题]，包括 [产品研发进度更新、客户反馈处理意见等]，需跟进 [后续行动或决策]。'
    },
    {
      level: 1,
      value: '今日共回复邮件80封，回复率为90%。其中，对重要邮件的回复处理情况如下：'
    },
    {
      level: 2,
      value:
        '针对上级领导邮件：已在 [具体时间] 内详细回复，对领导提出的修改意见和要求进行了逐一回应，提交了修改后的 [报告或方案名称]，并说明已安排 [相关人员] 着手补充 [所需数据或资料]，预计 [完成时间] 前完成并再次汇报。'
    },
    {
      level: 2,
      value:
        '针对核心业务部门 A 邮件：与相关团队成员紧急沟通后，于 [回复时间] 回复邮件提供了协助，明确了 [协助方式或资源分配]，同时针对业务细节问题提出了 [建议或解决方案]，与对方达成初步共识，后续将持续跟进确保问题顺利解决。'
    },
    {
      level: 2,
      value:
        '针对核心业务部门 B 邮件：在深入研究产品研发进度和客户反馈后，于 [回复时间] 回复邮件，详细阐述了 [应对措施或处理计划]，组织了跨部门会议讨论产品优化方向，确定了 [会议时间、参会人员等信息]，并将会议结果及时反馈给业务部门 B。'
    },
    {
      level: 1,
      value: '邮件处理过程中发现的问题及建议'
    },
    {
      level: 2,
      value:
        '部分邮件沟通效率较低，存在反复询问和信息分散的情况，导致处理时间延长。建议在邮件开头明确主题和目的，并尽量将相关信息整合在一封邮件中，避免多轮次的无效沟通。'
    },
    {
      level: 2,
      value:
        '对于一些跨部门协作的邮件，由于涉及多个环节和人员，信息传递容易出现偏差或延误。建议建立跨部门邮件沟通规范和流程，明确各环节的责任人和时间节点，同时加强邮件跟踪和提醒功能的使用，确保信息及时准确传达。'
    },
    {
      level: 2,
      value:
        '垃圾邮件和广告邮件的过滤效果有待提高，虽然已设置了一定的垃圾邮件过滤规则，但仍有部分此类邮件进入收件箱，影响正常邮件处理效率。建议定期更新邮件系统的垃圾邮件过滤规则和关键词库，同时加强员工对垃圾邮件识别和防范的培训教育'
    },
    {
      level: 1,
      value: '明日邮件工作计划'
    },
    {
      level: 2,
      value:
        '优先处理今日未完成的重要邮件，根据其他部门反馈信息和内部研讨结果及时给予准确回复，确保相关工作不受延误。'
    },
    {
      level: 2,
      value:
        '对今日邮件处理过程中发现的问题与相关部门或人员进行沟通协调，推动解决方案的实施，如组织跨部门邮件沟通规范培训、更新垃圾邮件过滤设置等，以提高邮件处理效率和质量'
    }
  ]
})
</script>

<style lang="scss" scoped>
.m-card:first-child {
  margin: 0;
}
.every-day {
  background: #fff;
  margin-top: 15px;
  border-radius: 14px;
  padding: 20px 10px;
  .title {
    font-weight: 600;
    font-size: 16px;
    color: #212429;
    // padding-bottom: 15px;
  }
}
</style>
